<template>
    <a-row class="RowView">
        <a-col :span="7">
            <a-input v-model="Value.key" placeholder="判断条件"></a-input>
        </a-col>
        <a-col :span="1" style="text-align: center">:</a-col>
        <a-col :span="16">
            <a-textarea v-model="Value.key" placeholder="表达式"></a-textarea>
        </a-col>
    </a-row>
</template>
<script setup>
import { ref, watch } from "vue";

const ItemKey = ref("");
const ItemValue = ref("");

const props = defineProps(["Value"]);
const emit = defineEmits(["update:Value"]);

watch(
    () => props.Value,
    (val) => {
        ItemKey.value = val.key;
        ItemValue.value = val.value;
    },
    { immediate: true }
);

watch(ItemKey, (val) => {
    emit("update:Value", {
        key: val,
        value: ItemValue.value,
    });
});

watch(ItemValue, (val) => {
    emit("update:Value", {
        key: ItemKey.value,
        value: val,
    });
});
</script>
<style scoped>
.RowView {
    padding: 8px;
}
</style>
